<ion-header>
  <ion-navbar>
    <ion-title>Slide Transitions</ion-title>
  </ion-navbar>
</ion-header>
<ion-content text-center>
  <h3>Slide (default)</h3>
  <ion-slides autoplay="2500" loop="true">
    <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>

  <h3>Cube</h3>
  <ion-slides autoplay="2500" loop="true" effect="cube">
    <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>

  <h3>Coverflow</h3>
  <ion-slides autoplay="2500" loop="true" effect="coverflow">
    <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>

  <h3>Fade</h3>
  <ion-slides autoplay="2500" loop="true" effect="fade">
    <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>
</ion-content>
